<template>
  <render />
</template>
<script lang="jsx" setup>
import { useAttrs, computed, ref } from 'vue';

let key = 0;
const props = defineProps({
  data: Array,
  columns: Array
});

const attrs = useAttrs();

// 处理多表头的情况
const getTableColumn = (column) => {
  const { render, headerRender, children, ...data } = column;
  // 处理自定义头部和自定义内容
  const slots = {};
  if (headerRender) {
    slots.header = headerRender;
  }
  if (render) {
    slots.default = render;
  }
  if (children) {
    slots.default = () => children.map(getTableColumn);
  }
  if (!column.prop && !column.type) {
    key += 1;
  }
  const columnProps = { align: 'center', ...data };
  return (
    <el-table-column
      key={column.prop || column.type || key}
      {...columnProps}
      v-slots={slots}
    ></el-table-column>
  );
};
const tableColumns = computed(() => props.columns.map(getTableColumn));

// 暴露模板ref，以便能在外部调用el-table的method
const tableRef = ref(null);
defineExpose({
  tableRef
});

const render = () => (
  <el-table ref={tableRef} data={props.data} {...attrs}>
    {tableColumns.value}
  </el-table>
);
</script>
